<!doctype html>

<html>
<head>
	<title></title>

	<meta charset="utf-8">
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
		#wrap {
			margin: 150px auto;
			width: 200px;
			text-align: center;
		}

		#baterai {
			width: 200px;
			height: 400px;
			border: 8px solid gray;
			position: relative;
			border-radius: 10px;
			font-family: Arial;
			font-size: 14px;
		}

		#hentikan {
			display: none;
		}

		.tombol {
			border: 8px solid gray;
			border-bottom: 0;
			height: 20px;
			width: 100px;
			position: absolute;
			right: 40px;
			top: -36px;
			background: gray;
			font-size: 120%;
			color: white;
			cursor: pointer;
		}

		.tombol:hover {
			color: #00D900;
		}

		#kotak {
			width: 100%;
			height: 4%;
			background: #BF3700;
			position: absolute;
			bottom:0;
			border-right:
		}

		#tulisan {
			text-align: center;
			margin: 8px;
			z-index: 9999;
			position: relative;
			top: 150px;
			color: gray;
			font-size: 500%;
		}

		#nav {
			background: gray;
			height: 40px;
			width: 100%;
			padding: 15px 0 0 50px;
			position: fixed;
			top:0;
		}

		#nav a {
			color: #FFF;
			text-decoration: none;
		}

		#nav a:hover {
			text-decoration: underline;
		}
	</style>

</head>
<body>
	<div id="nav">
		<a href="http://www.klikedukasi.com/2015/03/pure-javascript-animasi-nge-charge-batre.html">Kembali ke klikedukasi.com</a>
	</div>
<div id="wrap">

	<div id="baterai">
		<div id="tongolan" class="tombol">Mulai</div>
		<div id="hentikan" class="tombol">Stop</div>
		<div id="tulisan"><span style="color: #BF3700">Low Bat</span></div>
		<div id="kotak"></div>
	</div>
</div>
	<script type="text/javascript">
		/*
			Ngeces Baterai setInterval
			panembahan satyapradana @ klikedukasi.com
			28 Februari 2015
		*/
		var aksi = document.getElementById('tongolan');
		var berhenti = document.getElementById('hentikan');

		function jalankan() {
			var x = 0;

			var interpal = function() {
				
				var pink = document.getElementById('kotak');
				var tulis = document.getElementById('tulisan');
				x++;
				
				pink.style.height = x +'%';
				tulis.innerHTML = x + '%';
				aksi.style.display = 'none';
				berhenti.style.display = 'block';
				if(pink.style.height !== 0) {
				   pink.style.background = '#00D900';
				}
				if(x === 100) {
				    clearInterval(animasi);
				    jalankan();

				}

				function henti() {
					clearInterval(animasi);
					aksi.style.display = 'block';
					berhenti.style.display = 'none';
				}
				berhenti.addEventListener('click', henti, false);
			};
			
			var animasi = setInterval(interpal, 100);

			
		}

		aksi.addEventListener('click', jalankan, false);

		
		
	</script>
</body>
</html>